<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const router = useRouter();
const favorites = ref([]); // 要显示的收藏夹

// 加载收藏夹
const query = () => {
  axios.get('/favorites/query').then(resp => {
    favorites.value = resp.data;
    console.log("收藏夹", favorites.value);
  });
};

const goShopping = () => {
  router.push("/").catch(error => error);
};

const handleDelete = (row) => {
  ElMessageBox.confirm(
      `您确定要删除【${row.name}】吗？`, '警告',
      {
        confirmButtonText: '确 认',
        cancelButtonText: '取 消',
        type: 'warning',
      }).then(() => {
    return axios.post(`/favorites/remove/${row.productId}`);
  }).then(() => {
    ElMessage({ type: 'success', message: '清除成功', showClose: true });
    query(); // 更新收藏夹
  }).catch(errorMsg => {
    if (errorMsg === 'cancel') return;
    ElMessage({ type: 'info', message: errorMsg });
  });
};

const calculateMonthlyPayment = (price) => {
  const interestRate = 0.05;
  const months = 120;
  const monthlyRate = interestRate / 12;
  const monthlyPayment = (price * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -months));
  return monthlyPayment > 0 ? monthlyPayment.toFixed(2) : '0.00';
};

onMounted(() => {
  query(); // 加载全部收藏
});
</script>

<template>
  <el-card class="shopping-fav">
    <template v-if="favorites.length > 0">
      <el-row :gutter="20">
        <el-col v-for="car in favorites" :key="car.favoriteId" :span="6">
          <el-card class="car-card">
            <div class="pin"></div>
            <div class="car-info">
              <p class="added-date">收藏日期: {{ new Date(car.addedDate).toLocaleDateString() }}</p>
            </div>
            <div class="car-image">
              <button class="delete-btn" @click="handleDelete(car)">-</button>
              <el-image
                  :src="$urlImage + car.imgs"
                  fit="cover"
                  style="width: 100%; height: 200px;"
              ></el-image>
            </div>
            <div class="car-info">
              <h3>{{ car.name }}
                <el-popover
                    placement="top-start"
                    :width="350"
                    trigger="hover"
                    content="点击“-”按钮可将该车辆从我的心愿列表中移除。">
                  <template #reference>
                    <span style="cursor: pointer;">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="12" height="12">
                        <path d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0zm0 22a10 10 0 1 1 10-10 10.012 10.012 0 0 1-10 10zm1-15h-2v2h2zm0 4h-2v6h2z"/>
                      </svg>
                    </span>
                  </template>
                </el-popover>
              </h3>
              <p>类型: {{ car.categoryName }}</p>
              <p>价格: ¥{{ car.price }} 起</p>
              <p>月付：¥{{ calculateMonthlyPayment(car.price) }} 起
                <el-popover
                    placement="top-start"
                    :width="300"
                    trigger="hover"
                    content="注:月付是以10年期，年化率5%的月付利息，不包含首付款和保险费用。">
                  <template #reference>
                    <span style="cursor: pointer;">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="12" height="12">
                        <path d="M12 0a12 12 0 1 0 12 12A12.013 12.013 0 0 0 12 0zm0 22a10 10 0 1 1 10-10 10.012 10.012 0 0 1-10 10zm1-15h-2v2h2zm0 4h-2v6h2z"/>
                      </svg>
                    </span>
                  </template>
                </el-popover>
              </p>
              <el-button class="full-width-button" type="default"
                         @click="router.push({ name: 'carDetails', params: { id: car.productId } })">了解详情</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>

    <!-- 没有内容的显示 -->
    <template v-else>
      <div class="fav-empty">
        <el-empty description="收藏夹是空的"></el-empty>
        <el-button type="primary" style="width: 150px" @click="goShopping">
          去首页
        </el-button>
      </div>
    </template>
  </el-card>
</template>


<style scoped>
.pin {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #cfb269; /* 钉子的颜色 */
  position: relative;
  top: -10px; /* 使钉子向上移动 */
  left: 50%;
  transform: translateX(-50%); /* 中心对齐 */
}
.added-date {
  font-size: 14px; /* 根据需要调整字体大小 */
  color: #999; /* 颜色可根据需求调整 */
  margin: 10px 0; /* 调整外边距 */
}
.shopping-fav {
  margin: 15px;
  border-radius: 10px;
}

.car-card {
  border-radius: 10px;
  transition: box-shadow 0.3s;
  transform: skew(+1deg); /* 这里是倾斜度，可以根据需要调整 */
  border-color: #070505
}

.car-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.car-image {
  text-align: center;
  position: relative; /* 确保删除按钮相对定位 */
}

.car-info {
  padding: 10px;
}

.fav-empty {
  text-align: center;
}

.delete-btn {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离上边10px */
  right: 10px; /* 距离左边10px */
  background-color: red; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 无边框 */
  border-radius: 80%; /* 圆形按钮 */
  width: 30px; /* 按钮宽度 */
  height: 30px; /* 按钮高度 */
  font-size: 20px; /* 字体大小 */
  cursor: pointer; /* 鼠标样式 */
  z-index: 10; /* 确保按钮在图片之上 */
}

.delete-btn:hover {
  background-color: #cfb269; /* 悬停效果 */
}
.full-width-button {
  background-color: white; /* 白色背景 */
  border: 1px solid #dcdfe6; /* 边框颜色 */
  color: #409EFF; /* 按钮文字颜色 */
  width: 100%; /* 使按钮填满父容器 */
  padding: 10px; /* 调整内边距 */
  box-shadow: none; /* 去掉阴影 */
}

.full-width-button:hover {
  background-color: #f5f7fa; /* 悬停时的背景色 */
}
</style>

